<template>
<view>
<!--component/fastNav/fastNav.wxml-->
<!--<import src="/pages/webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}"/> -->
<!-- 快捷导航 -->
<view :class="'fastNav-box ' + (platform == 'wx' ? '' : 'hidde-app')" v-if="showNav">
  <navigator class="flex-col" hover-class="none" url="/pages/index/index" open-type="switchTab">
    <image src="/static/images/home.png" style="width:43rpx;height:44rpx;"></image>
    <text>首页</text>
  </navigator>
  <view>
    <button class="flex-col" open-type="share" v-if="showShare">
      <image src="/static/images/share_icon.png" style="width:44rpx;height:40rpx;"></image>
      <text>分享</text>
    </button>
    <navigator v-else class="flex-col" open-type="navigate" url="/pages/search/search">
      <image src="/static/images/search.png" style="width:44rpx;height:40rpx;"></image>
      <text>搜索</text>
    </navigator>
  </view>
  <view class="flex-col" @tap="subscribe" open-type="contact" v-if="platform === 'wx'">
    <image src="/static/images/logo1.png" style="width:86rpx;height:42rpx;"></image>
    <text>去App</text>
  </view>
</view>
<view class="nav-box" @tap="fastNavBtn">
  <text>快捷</text>
  <text>导航</text>
</view>

<!-- 客服弹框 -->
<view class="tkbox" v-if="showContact">
  <view class="cont-box">
    <view style="width:150rpx;height:70rpx;float:right;" @tap="closeBtn">
      <image src="/static/images/close.png" class="icon"></image>
    </view>
    <view class="cont">
      <text>进入客服消息后，点击右下角快捷图片，扫码关注公众号。</text>
      <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209162222_39379.gif"></image>
      <button open-type="contact" @contact="contactBtn" show-message-card send-message-img="http://imgbdb3.bendibao.com/whbdb/202010/16/20201016150903_14915.png" send-message-path send-message-title="小程序卡片">前往客服页面关注</button>
    </view>
  </view>
</view>
</view>
</template>

<script>
// component/fastNav/fastNav.js
const app = getApp();
const util = require("../../utils/util.js");

export default {
  data() {
    return {
      showNav: true,
      // 快捷导航是否展开
      showContact: false,
      // 是否显示公众号客服弹框
      showShare: false,
      // 是否显示分享按钮
      tAppid: app.globalData.tAppid,
      textraData: app.globalData.textraData // wxurl:"",
      ,
      showtk: false
    };
  },

  components: {},
  props: {
    qrcodeimg: {
      type: String,
      default: ''
    },
    qrcode: {
      type: String,
      default: ''
    },
    showNav: {
      type: Boolean,
      default: ''
    },
    showShare: {
      type: Boolean,
      default: ''
    },
    citycode: {
      type: String,
      default: ''
    },
    platform: {
      type: String,
      default: "wx"
    }
  },
  methods: {
    // 快捷导航
    fastNavBtn() {
      this.setData({
        showNav: !this.showNav
      });
    },

    // 公众号按钮
    subscribe() {
      let url = "https://mp.weixin.qq.com/s/RGJsioX7kbRPRreN-st_kw";
      uni.navigateTo({
        url: `/pages/webview/webview?path=${url}`
      }); // wx.navigateTo({
      //     url: '/pages/webview/webview?path=https://a.app.qq.com/o/simple.jsp?pkgname=com.bendibao',
      //     success: (result) => {
      //     },
      //     fail: () => {},
      //     complete: () => {}
      // });
      // let linkname = "关注公众号";
      // if (this.properties.qrcode) {
      //     if (this.properties.qrcode.indexOf("mp.weixin.qq.com") != -1) {
      //         wx.navigateTo({
      //             url: '/pages/webview/webview?path=' + encodeURIComponent(this.properties.qrcode),
      //         })
      //     } else {
      //         this.setData({
      //             showContact: true,
      //         })
      //         util.navContact(linkname, this.properties.qrcode)
      //     }
      // } else {
      //     // 获取城市公众号二维码
      //     util.cityConfig(this.properties.citycode).then(res => {
      //         this.setData({
      //             qrcodeimg: res.qrcode,
      //             wxurl: res.wxurl ? res.wxurl : '',
      //         })
      //         if (this.data.wxurl != "") {
      //             wx.navigateTo({
      //                 url: '/pages/webview/webview?path=' + encodeURIComponent(this.data.wxurl),
      //             })
      //         } else {
      //             this.setData({
      //                 showContact: true,
      //             })
      //             util.navContact(linkname, this.properties.qrcode ? this.properties.qrcode : this.data.qrcodeimg)
      //         }
      //     })
      // }
    },

    // 外链进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 外链弹框关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    // 公众号进入客服会话
    contactBtn() {
      this.setData({
        showContact: false
      });
    },

    // 公众号-关闭
    closeBtn() {
      this.setData({
        showContact: false
      });
    }

  }
};
</script>
<style>
/* component/fastNav/fastNav.wxss */

.page {
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
}


/* 快捷导航 */

.fastNav-box {
    position: fixed;
    bottom: 332rpx;
    right: 30rpx;
    background-color: #FFFFFF;
    width: 100rpx;
    height: 420rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 44rpx;
}

.hidde-app {
    height: 340rpx;
}

.fastNav-box button {
    background-color: transparent;
    line-height: 2
}

.fastNav-box .flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25rpx;
    padding: 0;
}

.fastNav-box .flex-col text {
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(65, 65, 65, 1);
    opacity: 1;
    margin-top: 6rpx;
}

.nav-box {
    position: fixed;
    bottom: 329rpx;
    right: 30rpx;
    background: rgba(255, 159, 44, 1);
    border-radius: 50%;
    width: 101rpx;
    height: 101rpx;
    box-shadow: 0rpx 0rpx 12rpx rgba(45, 45, 45, 0.2);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nav-box text {
    font-size: 25rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 1;
}


/* 客服弹框 */


/* 弹框 */

.tkbox {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;/*  #ifdef  H5  */
    top: calc(88rpx + constant(safe-area-inset-top));
    top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cont-box {
    width: 558rpx;
    height: 686rpx;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    border-radius: 40rpx;
    position: relative;
}

.icon {
    width: 29rpx;
    height: 29rpx;
    position: absolute;
    right: 43rpx;
    top: 37rpx;
}

.cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 80rpx 50rpx 0 50rpx;
}

.cont text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
    line-height: 45rpx;
}

.cont image {
    width: 450rpx;
    height: 314rpx;
    margin-top: 30rpx;
}

.cont button {
    width: 100%;
    background: rgba(255, 102, 0, 1);
    padding: 8rpx 0;
    opacity: 1;
    border-radius: 40rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 64rpx;
    margin-top: 40rpx;
}

button::after {
    border: 0;
}


/* button::after{border: 0;} */
</style>